<template>
    <div class="head_preview" id="move_head_preview">
<!--        <div @click="backFun" class="back_">-->
<!--            <el-icon :size="30" :color="'black'">-->
<!--                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="M685.248 104.704a64 64 0 0 1 0 90.496L368.448 512l316.8 316.8a64 64 0 0 1-90.496 90.496L232.704 557.248a64 64 0 0 1 0-90.496l362.048-362.048a64 64 0 0 1 90.496 0z"></path></svg>-->
<!--            </el-icon>-->
<!--        </div>-->

        <el-page-header title="返回" @back="backFun" class="headc_top_header">
        </el-page-header>

        <img class="filter_div" :src="'/static/user/img/head/' + this.selected_img" alt="背景"/>
        <img class="head_preview_img" :src="'/static/user/img/head/' + this.selected_img" alt="预览">
        <div class="head_pro">
            <span>图片来源: QuAn_</span>
            <a class="head_a" href="https://www.pixiv.net/users/6657532" target="_blank">Pixiv</a>
            &nbsp
            <a class="head_a" href="https://weibo.com/u/3190389701" target="_blank">微博</a>
        </div>
        <div @click="this.customHead" class="custom_head">
            <span style="text-decoration:underline;">自定义头像</span>
            <el-icon :size="12">
                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path></svg>
            </el-icon>
        </div>
    </div>

    <div class="head_preview">
        <div class="filter_div" id="filter_div_box"></div>
        <div class="head_preview_img"></div>
    </div>

    <div class="head_box">
        <div class="img_box" v-for="(item, index) in head_list">
            <img @click="this.select_img(index)" class="default_img_class" :src="'/static/user/img/head/' + item" alt="头像图片">
        </div>
    </div>
    <div class="head_button_div">
        <el-button @click="changeHead" class="head_change_button" type="primary" :disabled="button_can_use">保存头像</el-button>
    </div>
</template>

<script>
    import {ElLoading, ElMessage} from "element-plus";
    import axios from "axios";
    import Qs from "qs";

    export default {
        name: "HeadChange",
        data(){
            return {
                selected_box: void 0,
                selected_img: 'lumine.jpg',
                button_can_use: true,
                head_list: ['7th.jpg', 'ayaka.jpg', 'barbara.jpg', 'ei.jpg', 'eula.jpg', 'ganyu.jpg', 'hutao.jpg', 'jean.jpg', 'keqing.jpg', 'klee.jpg', 'kokomi.jpg', 'lumine.jpg', 'miko.jpg', 'mona.jpg', 'noelle.jpg', 'paimon.jpg', 'yoimiya.jpg'],

            }
        },
        methods: {
            select_img(index){

                let img_box = document.getElementsByClassName("img_box")[index]
                if (img_box === this.selected_box){
                    return
                }

                try {
                    this.selected_box.style.backgroundColor = ''
                }
                catch (TypeError) {
                    // 接一下，但是懒得抛了(不知道抛啥x)
                }

                this.selected_img = this.head_list[index]
                this.selected_box = img_box
                img_box.style.backgroundColor = '#d1f1fe'
                this.button_can_use = false
            },
            select_img_ios(e, index){

            },
            changeHead() {
                // 初始化加载动画
                const loading = ElLoading.service({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                })
                // 5秒后终止加载动画
                setTimeout(() => {
                    loading.close()
                }, 5000)

                let this_ = this;
                axios.post('/user/api/change_head', Qs.stringify({
                    "url": this_.selected_img,
                }))
                    .then(function (response) {

                        // 获取response时，5秒后终止加载动画
                        setTimeout(() => {
                            loading.close()
                        }, 500)

                        if (response.data === '1'){
                            ElMessage({message: "修改成功", type: 'success'})
                        }
                        else if (response.data === '0') {
                            ElMessage({message: "修改失败", type: 'error'})
                        }
                        else {
                            ElMessage({message: "服务器异常", type: 'error'})
                        }
                    })
                    .catch(function (error) {

                        // 出现异常时，0.5秒后终止加载动画
                        setTimeout(() => {
                            loading.close()
                        }, 500)

                        console.log(error);
                        ElMessage({message: "服务器异常", type: 'error'})
                    });
            },
            getHeadList() {
                // 初始化加载动画
                const loading = ElLoading.service({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                })
                // 5秒后终止加载动画
                setTimeout(() => {
                    loading.close()
                }, 5000)

                let this_ = this;
                axios.post('/user/api/get_head_list')
                    .then(function (response) {

                        // 获取response时，5秒后终止加载动画
                        setTimeout(() => {
                            loading.close()
                        }, 500)

                        let get_list = response.data
                        this_.selected_img = get_list.head.head
                        this_.head_list = get_list.list
                    })
                    .catch(function (error) {

                        // 出现异常时，0.5秒后终止加载动画
                        setTimeout(() => {
                            loading.close()
                        }, 500)

                        console.log(error);
                        ElMessage({message: "服务器异常", type: 'error'})
                    });
            },
            handleScroll(){
                console.log("滚动中...");
            },
            customHead(){
                ElMessage({message: "暂不支持自定义头像", type: 'info'})
            },
            backFun(){
                window.location.href = '/user/home'
            }
        },
        mounted() {
            let _this = this;
            // 以后再写(先画个饼x)
            // window.addEventListener('scroll',this.handleScroll)
            window.onload = function () {
                _this.getHeadList()
                // let e = document.getElementsByClassName('img_box')
                // console.log(e);
                // for (let i = 0; i < e.length; i++) {
                //     e[i].ontouchend = _this.select_img_ios
                // }
            }
        }
    }
</script>

<style scoped>
    @import "../assets/css/head.css";

</style>